<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />

    <title>Control User Cursor</title>
    <meta property="og:title" content="Control User Cursor" />

    <meta
      name="description"
      content="Small experiment to 'control' the user cursor with JavaScript and CSS."
    />
    <meta
      property="og:description"
      content="Small experiment to 'control' the user cursor with JavaScript and CSS."
    />

    <meta name="twitter:card" content="summary_large_image" />

    <link rel="canonical" href="https://javier.xyz/control-user-cursor" />
    <meta property="og:url" content="https://javier.xyz/control-user-cursor" />

    <meta
      property="og:image"
      content="https://javier.xyz/control-user-cursor/control-user-cursor.jpg"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="650" />

    <link rel="stylesheet" href="/control-user-cursor/style.css" />
  </head>
  <body>
    <div id="container"></div>

    <div class="info">
      <h1>Control User Cursor</h1>

      <div class="info-description">
        Small experiment to alter the cursor behavior.
        <a
          href="https://github.com/javierbyte/control-user-cursor"
          class="-prevent-custom-cursor"
        >
          How it works?</a
        >,
        <a href="#" data-toggle-cursor class="-prevent-custom-cursor">
          Show Real Cursor
        </a>
      </div>

      <button data-new-random class="-prevent-custom-cursor">Random</button>
    </div>

    <img id="cursor" data-cursor />

    <script src="/control-user-cursor/index.js"></script>
    <script src="/control-user-cursor/setup.js"></script>
  </body>
</html>
